<template>
	<view class="tn-flex tn-flex-column">
		<tn-sticky class="tn-white_bg">
			<tn-subsection v-model="subsectionValue" @change="changeSubsection">
				<tn-subsection-item title="代金券" />
				<tn-subsection-item title="套餐券" />
				<tn-subsection-item title="特价单" />
			</tn-subsection>
			<view class="tn-p-sm tn-pt tn-pb">
				<tn-search-box v-model="params.keyword" @search="getRefundList" @clear="getRefundList"
					search-button-bg-color="#F8F7F8" placeholder="请输入订单号搜索" search-button-text-color="#AAAAAA" />
			</view>
		</tn-sticky>
		<view class="tn-pl-sm tn-pr-sm">
			<view class="tn-mb-lg">
				<view class="tn-flex gap-2">
					<tn-input right-icon="right" v-model="orderStatus" type="select" placeholder="请选择订单状态"
						@click="openOrderPicker=true" />
					<view class="tn-flex gap-2">
						<tn-button width="120" @click="getRefundList">查询</tn-button>
						<tn-button width="120" type="info" @click="reset">重置</tn-button>
					</view>
				</view>
			</view>
			<loading v-if="isLoading" style="height: 60vh;"></loading>
			<view class="empty" v-else-if="refundList.length==0">
				<image
					src="https://sgymv1.oss-cn-beijing.aliyuncs.com/sgym/avatar/admin/2025/02/a0c4966b-11af-4c87-93aa-359f9c03d89f83ee61eba8e363790692eb5fd8a98de7.png"
					mode="widthFix"></image>
				<text>这里空空荡荡，啥也没有留下</text>
			</view>
			<view v-else>
				<view class="tn-radius card_item tn-p-sm tn-w-full" v-for="item in refundList" :key="item.id">
					<view class="tn-flex items-center justify-between gap-2">
						<view class="tn-flex items-center tn-flex-1">
							<tn-title :title="item.user_name" mode="hLine" assist-color="tn-blue" size="lg" />
						</view>
						<view :style="[{color:statusMap[item.refund_status]},'width:115rpx;text-align:right']">
							{{item.status_text}}
						</view>
					</view>
					<view class="tn-flex tn-flex-column justify-around tn-mt-sm">
						<text class="tn-mt-xs">
							<text>订单金额：</text>
							<text class="tn-text-sm">{{item.order_price}} 元</text>
						</text>
						<view class="tn-mt-xs tn-flex items-center">
							<view class="">
								<text>退款金额：</text>
								<text class="tn-text-sm" style="color: #FF444F;">{{item.refund_price}} 元</text>
							</view>
							<tn-button v-if="subsectionValue==2&&item.status==1" text class="tn-ml-sm"
								style="border-bottom: 1px solid;border-radius: 0;" @click="editPriceBtn(item)">改
								价</tn-button>
						</view>
						<text class="tn-mt-xs" v-if="item.user_mark">
							<text>退款原因：</text>
							<text class="tn-text-sm">{{item.user_mark}}</text>
						</text>
						<view class="tn-mt-xs" v-if="item.refund_images&&item.refund_images.length>0">
							<tn-photo-album :data="item.refund_images" :column="4" />
						</view>
						<view class="tn-mt-xs" style="word-break: break-all;" v-if="item.refund_mark">
							<view class="">
								<text>审核备注：</text>
								<text class="tn-text-sm">{{item.refund_mark}}</text>
							</view>
						</view>
					</view>
					<view class="tn-flex justify-between items-center tn-mt-sm">
						<text class="tn-text-xs tn-type-info_text">{{item.add_time}}</text>
						<view class="tn-flex-center-center">
							<text
								class="tn-mr-xs tn-text-xs tn-type-info_text">退款类型：{{payTypeMap[item.refund_type]}}</text>
						</view>
					</view>
					<view class="tn-pt-sm tn-mt-sm tn-border-top tn-gray-light_border" v-if="item.refund_status==1">
						<view class="tn-flex items-center justify-end gap-2">
							<tn-button type="danger" width="200" height="60" @click="reject(item.id)">驳回</tn-button>
							<tn-button type="primary" width="200" height="60"
								@click="approval('agree',item.id)">通过</tn-button>
						</view>
					</view>
				</view>
				<view class="tn-pt-sm tn-pb-sm tn-flex-center">
					<uni-pagination :total="total" :current="params.page" :pageSize="params.limit"
						@change="changePage" />
				</view>
			</view>
		</view>
	</view>
	<tn-popup v-model="showPopup" open-direction="center">
		<view class="tn-p-lg">
			<view class="popup_title">
				驳回理由
			</view>
			<tn-input type="textarea" v-model="reviewParams.reason" placeholder="请输入驳回理由" clearable :maxlength="50"
				height="220" show-word-limit></tn-input>
			<view class="tn-flex-center tn-mt">
				<tn-button size="lg" width="80vw" height="80" font-size="26"
					@click="approval('refuse')">确定提交</tn-button>
			</view>
		</view>
	</tn-popup>
	<tn-popup v-model="showEditPricePopup" open-direction="center" @close="editPriceParams.refund_price=''">
		<view class="tn-p-lg">
			<view class="popup_title">
				修改退款金额
			</view>
			<tn-form label-position="top">
				<tn-form-item label="订单原金额" label-position="top">
					<tn-input v-model="currentOrder.order_price" disabled></tn-input>
				</tn-form-item>
				<tn-form-item label="修改退款金额" label-position="top">
					<tn-input type="digit" v-model="editPriceParams.refund_price" placeholder="请输入退款金额"
						clearable></tn-input>
				</tn-form-item>
			</tn-form>
			<view class="tn-flex-center tn-mt">
				<tn-button size="lg" width="80vw" height="80" font-size="26" @click="refundEditPrice">确定提交</tn-button>
			</view>
		</view>
	</tn-popup>
	<tn-modal ref="modalRef" />
	<tn-picker v-model="params.status" v-model:open="openOrderPicker" :data="pickerOrderData"
		@confirm="confirmPicker" />
</template>

<script setup>
	import {
		onMounted,
		ref,
	} from 'vue'
	import {
		getRefundListApi,
		applyRefundReviewApi,
		refundEditPriceApi
	} from "@/request/worktop/system.js"

	onMounted(() => {
		getRefundList()
	})

	const isLoading = ref(true)

	const showPopup = ref(false)
	const showEditPricePopup = ref(false)

	const subsectionValue = ref(0)

	const openOrderPicker = ref(false)

	const pickerOrderData = [{
		label: '待审核',
		value: 1
	}, {
		label: '已通过',
		value: 2
	}, {
		label: '退款中',
		value: 3
	}, {
		label: '未通过',
		value: 4
	}, {
		label: '已完成',
		value: 5
	}]

	const payTypeMap = {
		'system': '系统测试',
		'wechat': '微信支付',
		'alipay': '支付宝支付'
	}
	// 1待审核2已通过4已驳回5已完成
	const statusMap = {
		4: '#FF444F',
		1: '#FBBD12',
		5: '#01BEFF',
		2: '#00D886',
	}

	const orderStatus = ref('待审核')

	const modalRef = ref()
	const formRef = ref()

	const refundList = ref([])
	const params = ref({
		page: 1,
		limit: 10,
		status: 1,
		keyword: '',
		type: 1
	})
	const total = ref(0)

	const reviewParams = ref({
		id: 0,
		action: '',
		reason: ''
	})

	const editPriceParams = ref({
		id: 0,
		refund_price: ''
	})
	const currentOrder = ref(null)

	// 获取退款列表
	const getRefundList = () => {
		isLoading.value = true
		getRefundListApi(params.value).then(res => {
			if (res.code == 0) {
				refundList.value = res.data
				total.value = res.other.total
			}
		}).catch(err => {
			uni.showToast({
				title: err.message,
				icon: 'none'
			})
		}).finally(() => {
			setTimeout(() => {
				isLoading.value = false
			}, 500)
		})
	}
	// 确定选择来源
	const confirmPicker = (_, item) => {
		orderStatus.value = item.label
	}
	// 重置按钮
	const reset = () => {
		orderStatus.value = ''
		params.value.status = ''
		params.value.keyword = ''
		getRefundList()
	}
	// 更新页码
	const changePage = (e) => {
		params.value.page = e.current
		getRefundList()
	}
	// 切换标题
	const changeSubsection = (index) => {
		params.value.page = 1
		params.value.type = index + 1
		getRefundList()
	}
	// 驳回申请
	const reject = (id) => {
		showPopup.value = true
		reviewParams.value.reason = ''
		reviewParams.value.id = id
	}
	// 审核
	const approval = (status, id = 0) => {
		if (status !== 'agree' && reviewParams.value.reason.trim() == '') {
			uni.showToast({
				title: '请先输入驳回理由',
				icon: "none"
			})
			return
		}
		if (id) {
			reviewParams.value.id = id
		}
		reviewParams.value.action = status
		modalRef.value?.showModal({
			title: '提示',
			content: `是否${status == 'agree' ? '通过' : '驳回'}该申请吗？`,
			showCancel: true,
			confirm: () => {
				if (status == 'agree') {
					reviewParams.value.reason = '同意申请'
				}
				applyRefundReview()
			}
		})
	}
	// 申请操作
	const applyRefundReview = () => {
		applyRefundReviewApi(reviewParams.value).then(res => {
			if (res.code == 0) {
				showPopup.value = false
				uni.showToast({
					title: res.message,
					success() {
						setTimeout(() => {
							getRefundList()
						}, 800)
					}
				})
			}
		}).catch(err => {
			uni.showToast({
				title: err.message,
				icon: "none"
			})
		})
	}
	// 改价按钮
	const editPriceBtn = (item) => {
		currentOrder.value = JSON.parse(JSON.stringify(item))
		editPriceParams.value.id = item.id
		showEditPricePopup.value = true
	}
	// 退款改价
	const refundEditPrice = () => {
		if (editPriceParams.value.refund_price == '') {
			uni.showToast({
				title: `请输入退款金额`,
				icon: "none"
			})
			return
		}
		const priceReg = /^(0\.0[1-9]|0\.[1-9]\d?|[1-9]\d{0,3}(\.\d{1,2})?)$/
		if (!priceReg.test(editPriceParams.value.refund_price)) {
			uni.showToast({
				title: `退款金额在0.01-9999之间，最多两位小数`,
				icon: "none"
			})
			editPriceParams.value.refund_price = currentOrder.value.order_price
			return
		}
		if (editPriceParams.value.refund_price > currentOrder.value.order_price) {
			uni.showToast({
				title: `最多退款${currentOrder.value.order_price}元`,
				icon: "none"
			})
			editPriceParams.value.refund_price = currentOrder.value.order_price
			return
		}
		modalRef.value?.showModal({
			title: '提示',
			content: `是否修改退款金额？`,
			showCancel: true,
			confirm: () => {
				refundEditPriceApi(editPriceParams.value).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: res.message,
							success() {
								setTimeout(() => {
									showEditPricePopup.value = false
									getRefundList()
								}, 800)
							}
						})
					}
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon: "none"
					})
				})
			}
		})
	}
</script>

<style scoped lang="scss">
</style>